<template>
    <el-container  class="contain">
      <!-- 头部 -->
      <el-header>
        <span>电商管理系统</span>
        <el-button type="info" @click="goback">退出</el-button>
      </el-header>
      <el-container>
        <!-- 侧边栏 -->
        <el-aside :width="isCollapse?64+'px':220+'px'">
            <div class="collpase" @click="collapseHandle">|||</div>
          <el-menu
            background-color="#333744"
            text-color="#fff"
            active-text-color="#66ccff"
            :collapse="isCollapse"
            :default-active="activePath?activePath:`/users`"
            :unique-opened="true"
            :collapse-transition="false"
            :router="true"
          >
            <!-- 侧边栏数据的添加 -->
              <!-- 一级导航的id + 一级导航的名字 -->
            <el-submenu :index="listitem.id+``" v-for="listitem in menuList" :key="listitem.id">
              <template slot="title">
                <i :class="iconobj[listitem.id]"></i>
                <span>{{listitem.authName}}</span>
              </template>
              <el-menu-item-group>
                <!-- 二级导航的路由 + 二级导航的name -->
                <el-menu-item :index="('/'+child.path)"  @click="savemenu(child.path)" v-for="child in listitem.children">
                  <i class="el-icon-menu"></i>
                  <span>{{child.authName}}</span>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>

          </el-menu>
        </el-aside>
        <!-- 主体 -->
        <el-main>
            <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
</template>

<script>
export default {
  data() {
    return {
      msg: "",
      menuList:[],
      isCollapse:false,//默认不合并
      iconobj:{
        "125":"el-icon-user-solid",
        "103":"el-icon-s-tools",
        "101":"el-icon-s-goods",
        "102":"el-icon-s-order",
        "145":"el-icon-s-marketing",
      },
      activePath:""
    };
  },
  created() {
      
      this.getMenuList()
      //当页面重新刷新的时候，就使用sessionstorage中的status
      this.activePath =  window.sessionStorage.getItem("activePath")
  },
  methods: {
    //获取menu中的数据
    async getMenuList(){
      let {data:res} = await this.$axios.get("http://timemeetyou.com:8889/api/private/v1/menus")
      
      //获取菜单信息成功
      if(res.meta.status !== 200){
        this.$message.error(res.meta.msg)
      }
      this.menuList = res.data
    },
    //退出，返回登陆
    goback() {
      //清除token
      window.sessionStorage.clear();
      this.$router.push("/login");
    },
    //判断是否合并
    collapseHandle(){
      this.isCollapse = !this.isCollapse;
    },
    //保存路由状态
    savemenu(status){
      window.sessionStorage.setItem("activePath","/"+status)
    }
  },
};
</script>

<style lang="less" scoped>
.contain {
  width: 100%;
  height: 100%;
  .el-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    span {
      font-size: 20px;
      letter-spacing: 0.2rem;
      color: #fff;
    }
    height: 120px;
    background-color: #333744;
  }
  .el-aside{
        width: 100%;
        height: 100%;
        background-color: #333744;
    .collpase{
        width: 100%;
        height:30px;
        background-color: #999;
        text-align: center;
        line-height: 30px;
        letter-spacing: .2rem;
        color: #fff;
        cursor: pointer;
        user-select: none;
    }
    .el-menu{
      border-right: none;
      .el-menu-item{
        font-size: 14px;
      }
    }
   
  }
  .el-main{
    background-color: rgb(234,237,241);
  }
 
}
</style>